<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5; padding: 0 8px;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="clock_leave"
			:style="{ '--app-color': app_color, '--app-radius': '8px', '--app-color-rgb': colorList[15] }">
			<!-- 请假类型 -->
			<view class="leave_type con" @click="type_show = true">
				<view class="title">
					<view>请假类型</view>
					<view class="tag">*</view>
				</view>
				<view class="xuanze">
					<view>{{ leave_type }}</view>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
			<!-- 请假参数 -->
			<view class="leave_form con">
				<view class="form_item" @click="calendar_show = true">
					<view class="title">
						<view>选择请假日期</view>
						<view class="tag">*</view>
					</view>
					<view class="xuanze">
						<u-icon name="arrow-right" color="#333" size="16"></u-icon>
					</view>
				</view>
				<view class="form_item" v-if="form.date.length != 0" style="border: none; padding: 0;">
					<view class="title">
						<view style="color: #999;">您已选择日期</view>
					</view>
				</view>
				<view class="form_item" v-if="form.date.length != 0">
					<view class="tagList">
						<view class="tag" v-for="(item, index) in form.date">
							<view class="text">{{ item }}</view>
							<view class="icon" @click="delTag(index)">
								<u-icon name="close" :color="app_color" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="form_item">
					<view class="title">请假时长</view>
					<view class="xuanze">
						<view>{{ form.date.length > 0 ? form.date.length : 0 }}天</view>
					</view>
				</view>
			</view>
			<!-- 请假原因 -->
			<view class="leave_reason con">
				<view class="title">
					<view>请假事由</view>
					<view class="tag">*</view>
				</view>
				<view class="reason">
					<view class="reason_text">
						<u--textarea maxlength="250" v-model="form.reason" placeholder="请假事由需填写"
							height="76"></u--textarea>
					</view>
				</view>
			</view>
			<view class="leave_fujian con">
				<view class="title">
					<view>提交附件</view>
				</view>
				<view class="fujian">
					<view class="showImgs">
						<view class="item" v-for="(item, index) in form.img_list" :key="index">
							<!-- 百度 图片预览 preview -->
							<image
								:src="item"
								mode="scaleToFill"
								style="width: 48px; height: 48px; border-radius: 8px;"
								@click="previewImage(index)"
								preview
							/>
							<view class="del" @click.stop="deletePic(index)">
								<u-icon name="close-circle-fill" color="#EA2121" size="16"></u-icon>
							</view>
						</view>
						<view class="upload" v-if="showUpload" @click="addImgs">
							<u-icon name="camera-fill" size="24" :color="app_color"></u-icon>
						</view>
					</view>
				</view>
				<view class="tip">
					<view>最多上传{{
						maxImageCount
					}}张</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; min-height: 80px;"></view>
		<!-- 提交按钮 -->
		<view class="submitArea"
			:style="{ '--app-color': app_color, '--app-radius': '8px', '--app-color-rgb': colorList[15] }"
			@click="submit">
			<view class="submit">提交</view>
		</view>
		<!-- 请假类型选择 -->
		<u-picker :show="type_show" :columns="columns" closeOnClickOverlay @close="type_show = false"
			@cancel="type_show = false" @confirm="typeConfirm"></u-picker>
		<!-- 日历时间选择 -->
		<u-calendar :show="calendar_show" mode="multiple" @confirm="calender_confirm" :defaultDate="form.date"
			@close="calendar_show = false" closeOnClickOverlay :maxCount="maxCalendarCount"></u-calendar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				type: 1,// 请假类型
				date: [],
				reason: '',
				img_list: [],
			},
			leave_type: '',
			type_show: false,
			columns: [
				// ['事假', '病假', '年假', '婚假', '产假', '陪产假', '丧假', '其他']
				[]
			],
			maxImageCount: 5, // 最多能上传多少张
			showUpload: true, // 是否显示上传组件 false 不显示 true 显示
			calendar_show: false, // 是否显示日历组件 false 不显示 true 显示
			maxCalendarCount: 14, // 最多能选择多少天
		};
	},
	onLoad() {
		const info = this.cache('plugin_oa/clock_leave');
		if (info) {
			this.$set(this, 'form', info)
			uni.removeStorageSync('plugin_oa/clock_leave');
		}
	},
	async created() {
		await this.moxiPost(
			'/plugin/oa/user/time_off/get_type', (res) => {
				if (res && res.data) {
					this.columns = [Object.values(res.data)];
					if (this.columns.length > 0 && this.columns[0].length > 0) {
						this.leave_type = this.columns[0][0];
					}
				}
			}
		)
	},
	methods: {
		delTag(index) {
			this.form.date.splice(index, 1);
		},
		async submit() {
			// 非空判断
			if (this.form.type == 0) {
				this.msg('请选择请假类型')
				return
			}
			if (this.form.date.length == 0) {
				uni.showToast({
					title: '请选择请假日期',
					icon: 'error',
				});
				return
			}
			if (this.form.reason == '') {
				uni.showToast({
					title: '请填写请假事由',
					icon: 'error',
				});
				return
			}
			// 提交前上传图片到服务器
			const uploadPromises = this.form.img_list.map((item, index) => {
				return new Promise((resolve) => {
					this.moxiUpload(item, (data) => {
						this.form.img_list[index] = data;
						resolve();
					});
				});
			});

			await Promise.all(uploadPromises);

			// 提交
			// 合并提交逻辑
			const params = {
				type: this.form.type,
				date: this.form.date,
				reason: this.form.reason,
				img_list: this.form.img_list,
			};
			if (this.form.id) {
				params.id = this.form.id;
			}

			this.moxiPost(
				'/plugin/oa/user/time_off/add',
				params,
				(res) => {
					this.msg(res.hint);
					// 跳转到请假记录页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/plugin_oa/leave_records'
						});
					}, 600);
				});
		},
		calender_confirm(e) {
			this.form.date = e;
			this.calendar_show = false;
		},
		// 上传图片
		addImgs() {
			if (this.form.img_list.length >= this.maxImageCount) {
				this.showUpload = false;
				return;
			}
			uni.chooseImage({
				count: this.maxImageCount - this.form.img_list.length, // 最多能上传的数量
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					tempFilePaths.forEach(path => {
						this.form.img_list.push(path);
					});
					if (this.form.img_list.length >= this.maxImageCount) {
						this.showUpload = false;
					}
				}
			});
		},
		deletePic(index) {
			// 删除对应的文件对象
			this.form.img_list.splice(index, 1);
			if (this.form.img_list.length < this.maxImageCount) {
				this.showUpload = true;
			}
		},
		previewImage(index) {
			// #ifndef MP-BAIDU
			uni.previewImage({
				current: this.form.img_list[index],
				urls: this.form.img_list
			});
			// #endif
		},
		typeConfirm(e) {
			this.leave_type = e.value[0];
			this.form.type = e.indexs[0] + 1;
			this.type_show = false;
		},
	},
}
</script>

<style lang="scss" scoped>
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.clock_leave {
	padding-top: 12px;

	.con {
		background-color: #fff;
		border-radius: var(--app-radius);
		padding: 16px;
		margin-bottom: 12px;
		@include flex(0, space-between, center, row, nowrap);
		font-size: 16px;
		color: #333;

		.title {
			@include flex(2px, flex-start, center, row, nowrap);

			.tag {
				color: #FF4040;
				font-size: 14px;
			}
		}

		.xuanze {
			@include flex(4px, normal, normal, row, nowrap);
		}
	}

	.leave_form {
		flex-direction: column;
		align-items: normal;
		gap: 16px;

		.form_item {
			@include flex(0, space-between, center, row, nowrap);
			padding-bottom: 16px;
			border-bottom: 0.5px solid rgba($color: #000000, $alpha: 0.1);

			&:last-of-type {
				padding-bottom: 0;
				border: none;
			}

			.tagList {
				@include flex(8px, flex-start, center, row, wrap);

				.tag {
					padding: 0 10px;
					height: 26px;
					@include flex(2px);
					border: 1px solid var(--app-color);
					color: var(--app-color);
					background-color: rgba($color: var(--app-color-rgb), $alpha: 0.1);
					border-radius: 4px;
					font-size: 12px;

					.icon {
						margin-top: 2px;
					}
				}
			}
		}
	}

	.leave_reason {
		flex-direction: column;
		align-items: normal;
		gap: 16px;
	}

	.leave_fujian {
		@include flex(8px, normal, normal, column);

		.fujian {
			width: 100%;
			@include flex(8px, normal, center);

			.showImgs {
				@include flex(4px, flex-start, center, row, nowrap);
				overflow-x: scroll;
				border-radius: var(--app-radius);

				.item {
					width: 48px;
					height: 48px;
					position: relative;
					overflow: hidden;
					flex-shrink: 0;

					.del {
						position: absolute;
						right: -4px;
						top: -4px;
						background-color: #fff;
						border-radius: 50%;
					}
				}
			}

			.upload {
				flex-shrink: 0;
				@include flex(0, center, center);
				width: 48px;
				height: 48px;
				border-radius: var(--app-radius);
				background-color: var(--app-color-rgb);
			}
		}

		.tip {
			width: 100%;
			@include flex(0, space-between, center);
			font-size: 12px;
			color: #999;
		}
	}
}

.submitArea {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-color: #fff;
	@include flex(0, center, center);

	.submit {
		margin: 16px auto;
		padding: 12px 100px;
		font-size: 16px;
		color: #fff;
		background-color: var(--app-color);
		border-radius: var(--app-radius);
 
		&:hover {
			opacity: 0.8;
		}
	}
}
</style>